import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  CrudExpose,
} from '@fast-crud/fast-crud';

import type { Ref } from 'vue';

import type { FormRulesExt } from '#/api';
import type { SopPermGroupModel } from '#/api/devOperation/sop/model/sopPermGroupModel';

import { ref } from 'vue';

import { useAccess } from '@vben/access';
import { $t } from '@vben/locales';

import { SopPermGroupApi } from '#/api/devOperation/sop/sopPermGroup';
import { ActionEnum } from '#/enums/commonEnum';
import { PermCode } from '#/enums/perm';
import { deleteButton, transformRes } from '#/plugins/fast-crud/common';

const { hasPermission } = useAccess();
const permCode = PermCode.devOperation.sop.sopPermGroup;

type ContextRef = {
  apiRef: Ref;
};

export function createCrudOptions(
  props: CreateCrudOptionsProps<
    SopPermGroupModel.SopPermGroupResultVO,
    ContextRef
  >,
): CreateCrudOptionsRet<SopPermGroupModel.SopPermGroupResultVO> {
  const selectedRowKeys = ref<string[]>([]);
  const { apiRef } = props.context;
  const currentRow = ref();

  const onCurrentRowChange = (id: string, groupName: string) => {
    currentRow.value = id;
    apiRef.value.setData({ groupId: id, groupName });
    apiRef.value.doRefresh();
  };

  return {
    crudOptions: {
      request: {
        pageRequest: SopPermGroupApi.pageRequest,
        addRequest: SopPermGroupApi.addRequest,
        editRequest: SopPermGroupApi.editRequest,
        delRequest: SopPermGroupApi.delRequest,
        infoRequest: SopPermGroupApi.infoRequest,
        transformRes: (prop) => {
          const { res } = prop;
          if (res.records && res.records.length > 0) {
            currentRow.value = res.records[0].id;
            apiRef.value.setData({
              groupId: res.records[0].id,
              groupName: res.records[0].groupName,
            });
            apiRef.value.doRefresh();
          }
          return transformRes(prop);
        },
      },
      actionbar: {
        buttons: {
          add: { show: hasPermission(permCode.add) },
          ...deleteButton({
            crudExpose: props.crudExpose,
            selectedRowKeys,
            removeFn: SopPermGroupApi.remove,
            role: permCode.delete,
          }),
        },
      },
      form: {
        wrapper: {
          is: 'a-modal',
        },
      },
      table: {
        striped: true,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
          selectedRowKeys,
          onChange: (changed: string[]) => {
            selectedRowKeys.value = changed;
          },
        },
        customRow(record: any, _index: number) {
          const clazz = record.id === currentRow.value ? 'fs-current-row' : '';
          return {
            style: 'cursor: pointer;',
            onClick() {
              onCurrentRowChange(record.id, record.groupName);
            },
            class: clazz,
          };
        },
      },
      rowHandle: {
        width: '120px',
        buttons: {
          edit: { show: hasPermission(permCode.edit) },
          remove: { show: hasPermission(permCode.delete) },
          view: { show: false },
          copy: { show: false },
        },
      },
      columns: {
        groupName: {
          title: $t('devOperation.sop.sopPermGroup.groupName'),
          type: 'text',
          search: { show: true },
        },
      },
    },
  };
}

export const frontRules = (
  _crudExpose: CrudExpose,
  _mode: ActionEnum,
): FormRulesExt => {
  return {};
};
